<?php
require_once("./db/conn.php");
?>
<?php
 $course_id = $_GET['course_id'];
 ?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程详情</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <link rel="stylesheet1" type="text/css" href="/css/homework.css">
</head>

<body>
    <?php include 'headers.php'; ?>
    <div class="main">
        <!-- 内容 -->
        <div class="container">

            <div class="left_bar">
                <ul>
                    <li data-target="notifications">课程通知</li>
                    <li data-target="materials">课程资料</li>
                    <li data-target="assignments">课程作业</li>
                    <li data-target="exams">在线考试</li>
                    <li data-target="discussions">讨论区</li>
                    <li data-target="reviews">课程评价</li>
                    <li data-target="analytics">学习记录与分析</li>
                </ul>
            </div>
            <div class="right_bar">
                <div id="notifications" class="content">
                    <!-- 这里加for循环实现就可以了 -->
                    <div class="inner">
                        <p class="title">课程通知标题</p>
                     <table>
                        <thead>
                            <tr>
                                <th>通知时间</th>
                                <th>通知内容</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                             echo 1;
                             echo $course_id;

                            $result3 = mysqli_query($conn, "SELECT * FROM inform where course_id = $course_id ");
                            while ($row3 = mysqli_fetch_array($result3)) {
                            ?>
                                <tr>
                                    <td><?php echo $row3['publish_time']; ?></td>
                                    <td><?php echo $row3['content']; ?></td>
                                </tr>
                            <?php
                            }
                            ?>
                        </tbody>
                    </table>
                    </div>
                </div>

                <div id="materials" class="content" style="display:none;">
                <div class="inner">
                <?php
                            $result5 = mysqli_query($conn, "SELECT * FROM resource where course_id = $course_id ");
                            while ($row5 = mysqli_fetch_array($result5)) {
                            ?>
                        <p class="title"><?php echo $row5['resource_name']; ?></p>
                        <p class="time"><?php echo $row5['upload_time']; ?></p>
                        <a href="<?php echo $row5['download_url']; ?>">点击这里下载噢~</a>
                        <br><br><br>
                        <?php
                            }
                            ?>
                    </div>
                </div>

                <div id="assignments" class="content" style="display:none;">课程作业内容
                    <table>
                        <thead>
                            <tr>
                                <th>作业内容</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                            $result = mysqli_query($conn, "SELECT * FROM homework where course_id = $course_id ");
                            while ($row = mysqli_fetch_array($result)) {
                            ?>
                                <tr>
                                    <td><?php echo $row['content']; ?></td>
                                    <td class="actions">
                                        <a class="cancel" href="up_homework.php?id=<?php echo $row['hw_id']; ?>">提交作业</a>
                                    </td>
                                </tr>
                            <?php
                            }
                            ?>
                        </tbody>
                    </table>
                </div>
                <div id="exams" class="content" >
                    <div class="invisible" id="paper">
                        <h2>在线考试内容</h2>

                        <form id="examForm" >
                            <!-- 试题内容 -->
                            <div>
                                <label for="q1">1. 选择题：2 + 2 = ?</label><br>
                                <input type="radio" id="q1a" name="q1" value="3">
                                <label for="q1a">3</label><br>
                                <input type="radio" id="q1b" name="q1" value="4">
                                <label for="q1b">4</label><br>
                                <input type="radio" id="q1c" name="q1" value="5">
                                <label for="q1c">5</label><br>
                            </div>

                            <div>
                                <label for="q2">2. 填空题：5 + 3 = ?</label><br>
                                <input type="text" id="q2" name="q2">
                            </div>

                            <div>
                                <label for="q3">3. 多选题：以下哪些是水果？</label><br>
                                <input type="checkbox" id="q3a" name="q3" value="apple">
                                <label for="q3a">苹果</label><br>
                                <input type="checkbox" id="q3b" name="q3" value="carrot">
                                <label for="q3b">胡萝卜</label><br>
                                <input type="checkbox" id="q3c" name="q3" value="banana">
                                <label for="q3c">香蕉</label><br>
                            </div>

                            <div>
                                <label for="q4">4. 简答题：请简述你对在线教育的看法。</label><br>
                                <textarea id="q4" name="q4" rows="4" cols="50"></textarea>
                            </div>

                            <button type="button" onclick="submitExam()">提交试卷</button>
                        </form>
                    </div>
                    <button id="startExamButton" onclick="showExam()">开始考试</button>

                    <script type="text/javascript">
                        function showExam() {
                            document.getElementById("paper").style.display = "block";
                        }

                        function submitExam() {
                            alert("试卷已提交！");
                            // 这里可以添加代码将答案提交到服务器
                        }

                        // 确保试卷在点击“开始考试”按钮后才显示
                        document.addEventListener("DOMContentLoaded", function() {
                            document.getElementById("startExamButton").onclick = function() {
                                showExam();
                            };
                        });
                    </script>
                </div>


                
                <div id="discussions" class="content" style="display:none;">
                    <!-- 发帖表单 -->
                    <div class="post-form">
                        <h2>发帖</h2>
                        <form id="post-form" method="post" action="#">
                            <textarea name="content" placeholder="内容" required></textarea>
                            <button type="submit">发布</button>
                        </form>
                    </div>

                    <!-- 帖子列表 -->
                    <div class="posts">
                        <h2>帖子</h2>
                        <div id="posts-container">
                            <table>
                                <!-- <thead>
                                    <tr>
                                        <th>发布者</th>
                                        <th>内容</th>
                                        <th>发布时间</th>
                                    </tr>
                                </thead> -->
                                <tbody>
                                    <?php
                                    $result2 = mysqli_query($conn, "SELECT * FROM post where course_id = $course_id ");
                                    while ($row1 = mysqli_fetch_array($result2)) {
                                    ?>
                                        <tr>
                                            <td><?php echo $row1['publisher']; ?></td>
                                            <td><?php echo $row1['content']; ?></td>
                                            <td><?php echo $row1['publish_time']; ?></td>
                                        </tr>
                                    <?php
                                    }
                                    ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="reviews" class="content" style="display:none;">
                    <table>
                        <thead>
                            <tr>
                                <th>发布者</th>
                                <th>内容</th>
                                <th>发布时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                            $result1 = mysqli_query($conn, "SELECT * FROM comment where course_id = $course_id ");
                            while ($row1 = mysqli_fetch_array($result1)) {
                            ?>
                                <tr>
                                    <td><?php echo $row1['stu_id']; ?></td>
                                    <td><?php echo $row1['content']; ?></td>
                                    <td><?php echo $row1['publish_time']; ?></td>
                                </tr>
                            <?php
                            }
                            ?>
                        </tbody>
                </div>
                <div id="analytics" class="content" style="display:none;">学习记录与分析内容</div>
            </div>
        </div>
    </div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取所有的li元素
        var items = document.querySelectorAll('.left_bar li');

        // 为每个li元素添加点击事件监听器
        items.forEach(function(item) {
            item.addEventListener('click', function() {
                // 获取点击项的data-target属性值
                var targetId = this.getAttribute('data-target');

                // 隐藏所有内容div
                document.querySelectorAll('.right_bar .content').forEach(function(div) {
                    div.style.display = 'none';
                });

                // 显示对应的内容div
                var targetDiv = document.getElementById(targetId);
                if (targetDiv) {
                    targetDiv.style.display = 'block';
                    console.log(targetId);
                }
            });
        });
    });
    document.getElementById('post-form').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止默认的表单提交行为

            // 获取表单数据
            var content = document.querySelector('textarea[name="content"]').value;

            // 使用 AJAX 发送数据到服务器
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'insert.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function() {
                if (xhr.status === 200) {
                    // 服务器返回成功
                    // 更新帖子列表
                    updatePostList(xhr.responseText);
                } else {
                    // 服务器返回错误
                    alert('发布帖子失败！');
                }
            };
            xhr.send('content=' + encodeURIComponent(content));
        });

        // 更新帖子列表
        function updatePostList(newPost) {
            // 获取帖子列表容器
            var postsContainer = document.getElementById('posts-container');

            // 创建一个新的帖子元素
            var newPostRow = document.createElement('tr');
            newPostRow.innerHTML = '<td>' + newPost + '</td><td>' + '内容' + '</td><td>' + '发布时间' + '</td>';

            // 将新帖子添加到帖子列表中
            postsContainer.appendChild(newPostRow);
        }
        document.getElementById('post-form').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止默认的表单提交行为

    // 获取表单数据
    var content = document.querySelector('textarea[name="content"]').value;

    // 使用 AJAX 发送数据到服务器
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'insert.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
        if (xhr.status === 200) {
            // 服务器返回成功
            if (xhr.responseText === "success") {
                // 更新帖子列表
                updatePostList();
                // 清空表单
                document.querySelector('textarea[name="content"]').value = '';
                // 显示成功提示
                alert("内容发布成功");
            } else {
                // 显示错误提示
                alert("发布帖子失败！");
            }
        } else {
            // 服务器返回错误
            alert('发布帖子失败！');
        }
    };
    xhr.send('content=' + encodeURIComponent(content));
});
</script>
<style scoped>
    .main {
        display: flex;
    }

    .container {
        display: flex;
        flex-direction: row;
    }

    .left_bar {
        display: flex;
        flex-direction: column;
        width: 20vw;
        background-color: #ffffff;
        border-radius: 12px;
        height: 42vh;
    }

    .left_bar ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .left_bar li {
        padding: 10px;
        /* 添加一些内边距以提高可读性 */
        height: 24px;
        line-height: 24px;
        margin-top: 10px;
        border-bottom: 1px solid #e0e0e0;
        /* 为每个列表项底部添加边框以分隔它们 */
        font-family: Arial, sans-serif;
        font-size: 16px;
    }

    .left_bar li:last-child {
        border-bottom: none;
    }

    .right_bar {
        background-color: #ffffff;
        width: 50vw;
        min-height: 30vh;
        max-height: 80vh;
        margin-left: 3vw;
        overflow-y: auto;
    }

    .inner {
        padding: 30px;

        .time {
            margin-top: 10px;
        }
    }

    .title {
        font-size: 22px;
        font-weight: bold;
    }

    .text {
        font-size: 14px;
        font-weight: 500;
        margin-top: 10px;
        max-width: 90%;
        word-break: break-all;
        line-height: 1.5;
    }

    .header {
        display: flex;
        flex-direction: row;
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #FFFFFF;
        height: 64px;
        align-items: center;

        .item {
            display: flex;
            margin-left: 20px;
            line-height: 64px;
            align-items: center;

            span {
                font-size: 16px;
                color: #333333;
                margin-left: 20px;
                margin-left: 3vw;
                font-weight: bold;
            }
        }

        .plat_name {
            font-size: 24px;
            color: #333333;
            margin-left: 20px;
            font-weight: bold;
            margin-left: 10vw;
        }

        .personality {
            margin-left: 25vw;
            font-size: 16px;
        }

        .avatar {
            margin-top: 30px;
            margin-left: 30px;
            width: 50px;
            height: 50px;
            border-radius: 100%;
        }
    }

    .content {
        padding: 20px;
    }

    .post-form,
    .comment-form {
        margin-bottom: 20px;
    }

    .post-form textarea,
    .comment-form textarea {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .post-form button,
    .comment-form button {
        padding: 10px 20px;
        background-color: #28a745;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .post-form button:hover,
    .comment-form button:hover {
        background-color: #218838;
    }

    .posts .post {
        border: 1px solid #ccc;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 4px;
    }

    .posts .post h3 {
        margin-top: 0;
    }

.comments .comment {
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 10px;
}
.invisible {
    display: none;
}
</style>

</html>